<!DOCTYPE html>
<html>
<head>
    {include file='public/meta'/}
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/bootstrap-datetimepicker.css"/>
    <script src="__STATIC_URL__/static/js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC_URL__/static/js/template.js"></script>
    <style>
        .info-row{
            line-height: 32px;
            color: #333;
        }
        .info-row label{
            padding-left: 15px;
            padding-right: 15px;
            font-weight: 400;
        }
        code {
            color: #5d9cec;
            background-color: #f4f8fb;
            border-radius: 4px;
        }
    </style>
</head>
<body>
{include file='public/header'/}
<!------------------导航-------------------------->
<section>
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <!--路径导航-->
        <div class="page-heading mgl15 mgr15">
            <ul class="breadcrumb">
                <li>当前位置是&nbsp;:</li>
                <li>
                    <a href="javascirpt:;">卡券管理</a>
                </li>
                <li class="active" style="color: #02b87f;">优惠券列表</li>
            </ul>
        </div>
        <!--内容列表-->
        <div class="alert alert-success alert-dismissible mgl15 mgr15" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            设置说明：高级设置可设置卡券支付时的自动抵扣，目前开放了代金券和折扣券的自动抵扣设置，其他类型卡券暂不支持。
        </div>
        <div class="panel panel-default panel-search mgl15 mgr15">

            <div class="panel-heading">
                <h3 class="panel-title">
                    <span class="glyphicon glyphicon-search pull-left" style="margin-right: 10px;"></span>筛选分类
                </h3>
            </div>
            <div class="panel-body">
                <form action="" method="get" class="form-horizontal table-search form-search" role="form" id="machform">

                    <div class="col-sm-6 col-md-4 col-lg-4 col-slg-3">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">卡券类别：</label>
                            <div class="col-sm-9">
                                <select name="card_type" class="form-control">
                                    <option value="">请选择类别</option>
                                    {volist name="card" id="card"}
                                    <option value="{$card.type}" {if condition="$p_data['card_type'] eq $card.type"}selected{/if}>{$card.name}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="panel-footer">
                <a href="javascript:;" class="btn btn-primary" onclick="searchform()">查找</a>
                <a href="javascript:;" class="btn btn-default" onclick="clearform()">清空</a>
            </div>
        </div>
        <ul id="myTab1" class="nav nav-tabs mgl15 mgr15" style="margin-bottom:10px;">
            <li >
                <a href="{:url('cards/cardslist')}">
                    卡券列表
                </a>
            </li>
            <li><a href="{:url('cards/draftslist')}" >草稿箱</a></li>
            <li class="active"><a href="{:url('cards/overlist')}" >过期券</a></li>
        </ul>
        <div class="panel panel-default mgl15 mgr15">

            <div class="panel-heading addCharts" style="background:#ededed;">卡券列表
                {if condition="checkPath('cards/creatCards')"}
                <a class="btn btn-info pull-right" href="{:url('cards/creatCards')}" style="margin-top: -7px;">添加优惠券</a>
                {/if}
            </div>
            <div class="panel-body">

                <table class="table table-bordered" data-toolbar="#toolbar">
                    <thead>
                    <tr>
                        <th>类型</th>

                        <th>名称</th>
                        <th>库存</th>
                        <th>核销</th>
                        <th>领取</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        {if condition="checkPath('cards/getdqrcode')"}
                        <th>二维码</th>
                        {/if}
                        {if condition="(checkPath('cards/editstock')) or (checkPath('cards/delcards'))"}
                        <th>操作</th>
                        {/if}
                    </tr>
                    </thead>
                    <tbody>
                    {volist name="list" id="vo"}
                    <tr>
                        <td>{$vo.card_type|getcardtype=###}</td>

                        <td>

                            <a class="btn-link" data-toggle="modal" {if condition="checkPath('cards/getinfocards')"} data-target="#cardModal" {/if} data-id="{$vo.id}">{$vo.title}</a>
                            {eq name="vo.card_type" value="CASH"}
                            <br>
                            <code>

                                满{$vo.least_cost}减{$vo.reduce_cost}代金券 {eq name="vo.is_minus" value="1"}[立减金]{/eq}

                            </code>
                            {/eq}
                        </td>
                        <td>{$vo.stocks}</td>
                        <td>{$vo.consume}</td>
                        <td>{$vo.getsume} / <a class="btn-link" href="{:url('cards/cardgetlist',['card_id'=>$vo['card_id']])}">查看</a>
                        </td>
                        <td>
                            {gt name="vo.end_timestamp" value=":time()"}
                            {switch name="vo.statu"}
                            {case value="0"}正常{/case}
                            {case value="1"}创建失败{/case}
                            {/switch}
                            {else/}
                            <span style="color: red">已过期</span>
                            {/gt}
                        </td>
                        <td>{$vo.create_time}</td>
                        {if condition="checkPath('cards/getdqrcode')"}
                        <td>
                            {if condition="$vo.qrcode_url neq ''"}
                            <!--data-toggle="modal" data-target="#myModal"-->
                            <a class="glyphicon glyphicon-qrcode" data-url="{$vo.qrcode_url}" onclick="showModal(this)" ></a>
                            {else}
                            {lt name="vo.end_timestamp" value=":time()"}
                            该卡已过期
                            {else/}
                            <a href="{:url('cards/getdqrcode',['id'=>$vo['id'],'card_id'=>$vo['card_id']])}">获取二维码</a>
                            {/lt}
                            {/if}


                        </td>
                        {/if}
                        {if condition="(checkPath('cards/editstock')) or (checkPath('cards/delcards'))"}
                        <td class="chakan">


                            <a class="btn-link" href="javascript:;" onclick="delcards(this);" data-card="{$vo['card_id']}">删除</a>


                        </td>
                        {/if}
                    </tr>
                    {/volist}
                    </tbody>
                </table>
            </div>
            {$list->render()}
        </div>
        {include file='public/footer'/}
    </div>
</section>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    二维码
                </h4>
            </div>
            <div class="modal-body">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab">
                            二维码
                        </a>
                    </li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home">
                        <img src="" alt="" style="width: 230px;height: auto;"/>
                        <a href="" id="codeone">
                            <button type="button" class="btn btn-primary" style="display: block;margin:0 auto;">
                                点击下载
                            </button>
                        </a>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Modal -->
<div class="modal fade" id="cardModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 700px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="cardModalLabel">卡券详情</h4>
            </div>
            <div class="modal-body">
                <div class="row info-row" id="templateHtml">
                    <script id="modallist" type="text/html">
                        <div class="col-xs-6">
                            <label class="col-xs-4 text-right ng-binding">卡券名称：</label>
                            <div class="col-xs-8 ng-binding">{{list.title}}</div>
                        </div>
                        <div class="col-xs-6">
                            <label class="col-xs-4 text-right">卡券类型：</label>
                            <div class="col-xs-8">{{list.card_type}}</div>
                        </div>
                        <div class="col-xs-6">
                            <label class="col-xs-4 text-right ng-binding">领取数量：</label>
                            <div class="col-xs-8 ng-binding">{{list.getsume}}</div>
                        </div>
                        <div class="col-xs-6">
                            <label class="col-xs-4 text-right ng-binding">库存：</label>
                            <div class="col-xs-8">{{list.stocks}}</div>
                        </div>
                        <div class="col-xs-6">
                            <label class="col-xs-4 text-right ng-binding">核销：</label>
                            <div class="col-xs-8">{{list.consume}}</div>
                        </div>
                        <div class="col-xs-6">
                            <label class="col-xs-4 text-right ng-binding">状态：</label>
                            <div class="col-xs-8">{{list.statu}}</div>
                        </div>
                        <div class="col-xs-6">
                            <label class="col-xs-4 text-right ng-binding">创建时间：</label>
                            <div class="col-xs-8">{{list.create_time}}</div>
                        </div>
                        <div class="col-xs-6">
                            <label class="col-xs-4 text-right ng-binding">生效时间：</label>
                            <div class="col-xs-8">{{list.begin_timestamp}}</div>
                        </div>
                        <div class="col-xs-6">
                            <label class="col-xs-4 text-right ng-binding">过期时间：</label>
                            <div class="col-xs-8">{{list.end_timestamp}}</div>
                        </div>
                    </script>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>

<script type="text/javascript">
    function delcards(obj){
        layer.confirm('有未核销的用户时不可删除，删除后相关的营销活动将受此影响或不再发放此卡券。', {
            btn: ['删除'] //可以无限个按钮

        }, function(index, layero){
            var card_id = $(obj).attr("data-card");
            var overcard = 'overcard';
            $.ajax({
                url:"{:url('cards/delcards')}",
                type:"post",
                data:{
                    card_id:card_id,
                    type:overcard
                },
                success:function(data){
                    console.log(data);
                    layer.alert(data.message);
                    if(data.code==0){
                        setTimeout(function(){
                            window.location.reload()
                        },1500)
                    }



                }
            })
        });
    }
    function showModal(id){
        var url1 = $(id).data("url");
        $("#home img").attr("src", url1);
        $("#codeone").attr("href", url1);
        if(url1){
            $('#myModal').modal('show')
        }else{
            layer.alert("二维码不存在")
        }
    }
    $(function(){
        $('#myModal').on('hide.bs.modal', function () {
            $("#home img").attr("src", '');
            $("#codeone").attr("href", '#');
        });
        $("#cardModal").on('show.bs.modal', function () {
            var id = $(event.target).data("id");
            var datas = {};

            $.ajax({
                url:"{:url('cards/getinfocards')}",
                type:"post",
                data:{
                    id:id
                },
                success:function(data){
                    console.log(data);

                    $("#nick-name").text(data.nickname);
                    datas.list = data;
                    var html = template('modallist', datas);

                    $("#templateHtml").html(html);
                }
            })
        });
    })
</script>


</html>
